<template>
	<view>
		<view class="body" :style="pageStyle" style="position: relative;" v-if="pageConfig">
			<block v-if="backimage">
				<image :src="backimage" mode="widthFix" style="width: 100%;position: absolute;top:0rpx;left:0rpx;">
				</image>
			</block>
			<view v-for="(item,index) in pageConfig.component">

				<block v-if="item.component=='graphicnavigation'">
					<graphicnavigation :key="item.key" :ref="item.id" :style="item.setStyle" :datas="item.setStyle"
						@nav="nav" @childEvent="handleChildEvent"></graphicnavigation>
				</block>

				<block v-if="item.component=='captiontext'">
					<captiontext :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle" @nav="nav"
						@childEvent="handleChildEvent"></captiontext>
				</block>

				<block v-if="item.component=='commoditysearch'">
					<commoditysearch :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle"
						@nav="nav" @childEvent="handleChildEvent"></commoditysearch>
				</block>

				<block v-if="item.component=='storenotecard'">
					<storenotecard v-if="item.hide==true?false:true" :ref="item.id" :key="item.key"
						:style="item.setStyle" :datas="item.setStyle" @nav="nav" @childEvent="handleChildEvent">
					</storenotecard>
				</block>

				<block v-if="item.component=='entertheshop'">
					<entertheshop :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle"
						@nav="nav" @childEvent="handleChildEvent"></entertheshop>
				</block>

				<block v-if="item.component=='magiccube'">
					<magiccube :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle" @nav="nav"
						@childEvent="handleChildEvent"></magiccube>
				</block>

				<block v-if="item.component=='notice'">
					<notice :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle" @nav="nav"
						@childEvent="handleChildEvent"></notice>
				</block>

				<block v-if="item.component=='photos'">
					<photos :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle" @nav="nav"
						@childEvent="handleChildEvent"></photos>
				</block>

				<block v-if="item.component=='auxiliarysegmentation'">
					<auxiliarysegmentation :key="item.key" :ref="item.id" :style="item.setStyle" :datas="item.setStyle"
						@nav="nav" @childEvent="handleChildEvent"></auxiliarysegmentation>
				</block>

				<block v-if="item.component=='pictureads'">
					<pictureads :ref="item.id" :key="item.key" :style="item.setStyle" :datas="item.setStyle" @nav="nav"
						@childEvent="handleChildEvent"></pictureads>
				</block>

				<block v-if="item.component=='suspension'">
					<suspension :ref="item.id" :key="item.key" :datas="item.setStyle" @nav="nav"
						@childEvent="handleChildEvent"></suspension>
				</block>

				<block v-if="item.component=='slot'">
					<view>
						<slot :name="item.setStyle.name"></slot>
					</view>
				</block>

				<!-- <keep-alive>			 -->
				<!-- <component :ref="item.id" :is="item.component" :datas="item.setStyle" :style="item.setStyle"
			@childEvent="handleChildEvent"
			@nav="nav"
			/> -->
				<!-- </keep-alive> -->

			</view>
			<view v-if="title == '页面标题'" :style="{color:ver_color}"
				style="padding-top: 35rpx; opacity: 0.3 ; text-align: center; font-size: 32rpx;"
				@longtap="ver_color='#cccccc'">
				<text @click="wuji">© 柳州博亚科技有限公司 保留所有权利</text>
				<br>
				<text>柳钢域名备案号 桂ICP备17009352号</text>
				<br>
				<text>桂公网安备4502020200044</text>
				<br>
				<view style="display: flex; justify-content: center;">
					<view @click="Policy('privacy')">隐私政策 |</view>
					<view @click="Policy('user')" style="margin-left: 8rpx;">用户协议 |</view>
					<view @click="Policy('email')" style="margin-left: 8rpx;">联系我们</view>
				</view>
				<!-- {{page.ver}}-{{page.id}}-{{page.updated_at}} -->
			</view>

		</view>
		<view v-else>
			<view style="position: absolute;top: 30%;left: 20%" class="loading"></view>
		</view>
	</view>
</template>
<script>
	import graphicnavigation from '@/components/common/graphicnavigation.vue'
	import captiontext from '@/components/common/captiontext.vue'
	import commoditysearch from '@/components/common/commoditysearch.vue'
	import storenotecard from '@/components/common/storenotecard.vue'
	import entertheshop from '@/components/common/entertheshop.vue'

	import magiccube from '@/components/common/magiccube.vue'
	import notice from '@/components/common/notice.vue'
	import auxiliarysegmentation from '@/components/common/auxiliarysegmentation.vue'
	import pictureads from '@/components/common/pictureads.vue'
	import suspension from '@/components/common/suspension.vue'
	import photos from '@/components/common/photos.vue'

	import comm from '@/Grace6/js/comm.js'

	export default {
		props: {
			page: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {
			graphicnavigation,
			// TabB,
			// communitypowder,
			captiontext,
			commoditysearch,
			storenotecard,
			magiccube,
			entertheshop,
			suspension,
			photos,
			notice,
			pictureads,
			auxiliarysegmentation
		},
		data() {
			return {
				ver_color: "#000",
				pageStyle: "background-color:#ffffff",
				componentlist: [],
				pageConfig: this.page,
				backimage: null,
				titleList: [],
				title: null,
			}
		},
		beforeCreate() {
			// console.log("beforeCreate",this.page);
			// this.page=uni.getStorageSync("pages_首页");
			// this.pageStyle=this.$comm.getCss(this.page.templateJson.Style);
		},
		created() {
			// this.setPage(this.pageStyl);
			this.page_style();
			this.get_notice();
			//console.log("pageStyle", this.pageStyle);
		},
		// watch: {
		// 	page:{
		// 		handle(newVal,oldVal){
		// 			console.log("watch",newVal);
		// 			this.pageConfig=newVal;

		// 		},deept:true
		// 	}
		// },
		methods: {
			wuji() {
				console.log('ceshi: ', this.ceshi);
				var self = this
				self.touchNum++
				setTimeout(() => {
					if (self.touchNum >= 2) {
						uni.navigateTo({
							url: '/pages/web/page?name=测试页面'
						})
						// self.$emit("nav", {
						// 	type: "magiccube",
						// 	data: self.ceshi
						// });
					}
					self.touchNum = 0
				}, 350)
			},
			Policy(e) {
				uni.navigateTo({
					url: "/pages/login/agreement/agreement?type=" + e
				});
			},
			setPageConfig(d) {
				console.log("aoedit.setpageconfig", d);
				this.pageConfig = d;
				// console.log('数据：', this.pageConfig);
				this.page_style();
			},

			get_ref(name) {
				return this.$refs[name];
			},
			update_ref(name) {
				for (let key in this.page.component) {
					if (this.page.component[key].id == name || key.toString() == name.toString()) {
						this.page.component[key].key = this.page.component[key].key + "x";
					}
				}
			},
			setPage(data) {
				if (data == null || data == "") return;
				this.pageConfig = data;
				this.page_style();
				// console.log("setPage", data);

				uni.setNavigationBarTitle({
					title: data.templateJson.name
				});

				for (let key in data.component) {
					let item = data.component[key];

					if ([
							"graphicnavigation",
							"captiontext",
							"commoditysearch",
							"notice",
							"magiccube",
							"suspension",
							"storenotecard",
							"auxiliarysegmentation",
							"pictureads",
							"entertheshop",
						].indexOf(item.component) != -1) {
						let id = "component_" + key;
						if (item.id) {
							id = item.id
						}
						item.id = id;
						this.componentlist.push(item);
						// console.log("component-"+key,item.component);
					}
				}

			},
			setData(name, data, attr = 'imageList') {
				if (this.pageConfig == null) return;
				// console.log("setData",name,data);
				if (!this.pageConfig.hasOwnProperty("component")) return;
				for (let key in this.pageConfig.component) {
					if (this.pageConfig.component[key].id == name || key.toString() == name.toString()) {
						this.pageConfig.component[key].setStyle[attr] = data;
						let tt = new Date().getTime();
						this.pageConfig.component[key].key = "ID_" + tt;
						// console.log("setData->" + name, this.pageConfig.component[key].setStyle);

					}
				}

			},
			set_item(widget, index, attr, val) {
				this.$refs.nav1.badge(10)
			},
			handleChildEvent(e) {
				console.log("handleChildEvent", e);
				this.$emit("event", e);
			},
			nav(d) {
				console.log("asediter->nav", d);
				console.log("title", this.title);
				if (d.data.hasOwnProperty("http")) {
					if (typeof d.data.http.externalLink == 'undefined') {
						uni.showToast({
							title: "未配置地址！",
							icon: "none"
						});
						return;
					}
					let token = false;
					if (d.data.http.hasOwnProperty("token")) {
						token = d.data.http.token;
					}
					switch (d.data.linktype.toString()) {
						case "10": //内部
							this.$comm.nav_to(d.data.http.externalLink, d.data.text, 'nav', token);
							break;
						case "11": //外部
							this.$comm.nav_to(d.data.http.externalLink, d.data.text, 'nav', token);
							break;
						case "12": //小程序

							let http = JSON.parse(d.data.http.externalLink);
							let url = http.path;
							let parm = http.parm ?? "";
							let link = {
								"id": http.sourceid,
								"path": url + parm
							}
							console.log("aoediter->nav=12", link);
							this.$comm.wx_nav(link, token)
							break;
					}
				} else {}
			},
			get_notice() {
				let self = this
				let data = {
					page: 1,
					pageSize: 5,
					type: 2,
					state: 0
				}
				console.log("get_notice");
				this.$boya.NGet("/app/my_notice", data, (res) => {
					console.log('公告res: ', res);
					let titleList = res.data
					let component = this.pageConfig.component
					for (var i = 0; i < component.length; i++) {
						if (component[i].component == "notice") {
							if (titleList.length > 0) {
								component[i].setStyle.noticeText = titleList[0].title
							}
							// console.log('我是noticeText： ', titleList[0].title);
						}
					}
				}, err => {
					console.log('公告err: ', err);
				}, false, false)
			},
			page_style() {
				// if (this.page.hasOwnProperty("templateJson")) {
				// console.log("page_style",this.pageConfig);
				if (this.pageConfig == null) return;
				if (!this.pageConfig.hasOwnProperty("templateJson")) return;

				// setTimeout(function() {
				// 	let component = this.pageConfig.component
				// 	for (var i = 0; i < component.length; i++) {

				// 		if (component[i].component == "notice") {

				// 			console.log('component[i].setStyle.noticeText: ', component[i].setStyle.noticeText);
				// 			console.log('this.titleList[0].title: ', this.titleList);
				// 			// component[i].setStyle.noticeText = this.titleList[0].title
				// 		}
				// 	}
				// }, 2000);

				this.title = this.pageConfig.templateJson.name
				console.log('this.title: ', this.title);
				let _style = this.pageConfig.templateJson.Style;

				if (this.pageConfig.templateJson.bgColor != "") {
					_style.backgroundColor = this.pageConfig.templateJson.bgColor
					// _style.background = 'linear-gradient(to right, #FF5453, #FF5B5B, #FF7373, #FFAEAC, #FFDFE3)'
					this.pageStyle = {
						"backgroundColor": this.pageConfig.templateJson.bgColor
					}
				}
				if (this.pageConfig.templateJson.bgImg != "") {
					//_style.backgroundImage = "url(" + this.page.templateJson.bgImg + ")"
					this.backimage = this.pageConfig.templateJson.bgImg;
					console.log("backimage", this.backimage);
				}
				// if (this.page.templateJson.bgImg != "") {
				// 	_style.background = "url(" + this.page.templateJson.bgImg + ") 100% 100% / 100% 100%"
				// }
				// console.log("page_syle", _style);
				this.pageStyle = this.$comm.getCss(_style);
				// console.log(this.pageStyle);
				// console.log("pageConfig.component", this.pageConfig.component);
				// 	this.pageStyle = _style;
				// 	console.log("page_style",_style);
				// 	return _style;
				// } else {
				// 	this.pageStyle = null;
				// 	return null;
				// }

				// this.pageStyle.background_color="#333333";
			}

		}
	}
</script>
<style>
	.container {
		background-color: rgba(249, 249, 249, 10);
		width: 100%;
		height: 100vh;
	}

	.body {
		background-repeat: no-repeat;
	}

	.loading {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		color: #666;
		left: -100px;
		animation: shadowRolling 2s linear infinite;
	}

	@keyframes shadowRolling {
		0% {
			box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
				0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
		}

		12% {
			box-shadow: 100px 0 #666, 0px 0 rgba(255, 255, 255, 0),
				0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
		}

		25% {
			box-shadow: 110px 0 #666, 100px 0 #666, 0px 0 rgba(255, 255, 255, 0),
				0px 0 rgba(255, 255, 255, 0);
		}

		36% {
			box-shadow: 120px 0 #666, 110px 0 #666, 100px 0 #666,
				0px 0 rgba(255, 255, 255, 0);
		}

		50% {
			box-shadow: 130px 0 #666, 120px 0 #666, 110px 0 #666, 100px 0 #666;
		}

		62% {
			box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #666, 120px 0 #666,
				110px 0 #666;
		}

		75% {
			box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
				130px 0 #666, 120px 0 #666;
		}

		87% {
			box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
				200px 0 rgba(255, 255, 255, 0), 130px 0 #666;
		}

		100% {
			box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
				200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
		}
	}
</style>